<template>
    <view class="step-cont">
        <view class="step-list">
        	<view class="li" :class="{active:active==0}">
        		<view class="div">
        			<view class="h3">1</view>
        			<view class="p">1.我的购物车</view>
        		</view>
        	</view>
        	<view class="li" :class="{active:active==1}">
        		<view class="div">
        			<view class="h3">2</view>
        			<view class="p">2.填写核对订单信息</view>
        		</view>
        	</view>
        	<view class="li" :class="{active:active==2}">
        		<view class="div">
        			<view class="h3">3</view>
        			<view class="p">3.支付订单</view>
        		</view>
        	</view>
        </view>
    </view>
</template>

<script>
	export default{
		name:'step',
		props:['active']
	}
</script>

<style lang="scss" scoped>
    .step-cont{
        width:710rpx;
        margin:0 auto;
        .step-list {
            width: 100%;
        	display: flex;
        	justify-content: center;
        	padding-bottom: 80rpx;
        
        	.li {
        		width: 33.3%;
        		position: relative;
        		height: 14rpx;
        		background-color: #cccccc;
        
        		&:nth-of-type(1) {
        			border-top-left-radius: 16rpx;
        			border-bottom-left-radius: 16rpx;
        		}
        
        		&:nth-last-of-type(1) {
        			border-top-right-radius: 16rpx;
        			border-bottom-right-radius: 16rpx;
        		}
        
        		&.active {
        			background-color: #ed1475;
        
        			.div {
        				.h3 {
        					background: #ed1475;
        				}
        
        				.p {
        					color: #ed1475;
        				}
        			}
        		}
        
        		.div {
        			width: 100%;
        			position: absolute;
        			text-align: center;
        			top: -11rpx;
        
        			.h3 {
        				background: #ccc;
        				border-radius: 50%;
        				color: #fff;
        				width: 36rpx;
        				height: 36rpx;
        				line-height: 36rpx;
        				text-align: center;
        				margin: 0 auto;
        			}
        
        			.p {
        				color: #cccccc;
        				font-size: 24rpx;
        				margin-top: 10rpx;
        			}
        		}
        	}
        }
    }
</style>
